<!-- <template>
  <div>
  <div v-for="(item,index) in houseList" :key="index">
     <div :style="getStyle(item.status)">{{item.name}}</div>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      houseList: [
        {
          id: 1,
          name: 1,
          status: 'a'
        }, {
          id: 2,
          name: 2,
          status: 'b'
        }, {
          id: 3,
          name: 3,
          status: 'c'
        }
      ]
    }
  },
  methods: {
    getStyle (e) {
      console.log('值', e)
      if (e === 'a') {
        return {
          width: '60px',
          height: '60px',
          background: 'yellow',
          margin: '10px auto'
        }
      } else if (e === 'b') {
        return {
          width: '60px',
          height: '60px',
          background: 'red',
          margin: '10px auto'
        }
      } else if (e === 'c') {
        return {
          width: '60px',
          height: '60px',
          background: 'pink',
          margin: '10px auto'
        }
      }
    }
  }
}
</script> -->

<!-- <template>
  <div>
  <div
    class="wrapper"
    v-for="(item, index) in houseList"
    :key="index"
    @click="rightTap(index)"
  >
    <div class="houseTitle" :class="{ active: index === rightIndex }">
      {{ item }}
    </div>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      rightIndex: 0,
      houseList: [1, 2, 3]
    }
  },
  methods: {
    rightTap (index) {
      this.rightIndex = index
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 118px;
  height: 60px;
  margin: 6px auto 0 auto;
  .houseTitle {
    font-size: 22px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .active {
    color: #2a7ffa;
    background-color: pink;
  }
}
</style> -->

<template>
  <div >
    <div v-for="(item,index) in list" :key="index" :class="Obj" @click="handleClick">
{{item}}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: {
        a: [1, 2, 3],
        b: [5, 6, 7]
      },
      Obj: {
        a1: false
      }
    }
  },
  methods: {
    handleClick (e) {
      console.dir(e)
    }
  }
}
</script>
<style lang="less" scoped>
.a1{
  background-color: pink;
}
</style>
